<style type="text/css">
body {
	margin-left: 0px;
	text-align: center;
}
p{
	margin-top: 30px;
	font-weight: bolder;
	font-family: Arial;
}
</style>
<p>Fun level <span id="target" style="font-size: 10px; color: red;">0 %</span>.</p>


<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

<script src="jquery.color.min.js"></script>
<script src="jquery.animateNumber.min.js"></script>

<script>
  var decimal_places = 1;
  var decimal_factor = decimal_places === 0 ? 1 : decimal_places * 10;

  $('#target').animateNumber(
    {
      number: 100 * decimal_factor,
      color: 'green',
      'font-size': '30px',

      numberStep: function(now, tween) {
        var floored_number = Math.floor(now) / decimal_factor,
            target = $(tween.elem);
        if (decimal_places > 0) {
          floored_number = floored_number.toFixed(decimal_places);
        }

        target.text(floored_number + ' %');
      }
    },
    15000
  )
</script>
